import { Extrude } from '@react-three/drei';
import { map } from 'lodash-es';
import { EllipseCurve, Shape } from 'three';
import { getEdgeColorConfig } from '../utils';

export function PlankEdge(props: {
  shape: Shape;
  thickness: number;
  colors?: string[];
  edgeBanding: number[];
}) {
  const {
    shape,
    thickness,
    colors = ['red', 'green', 'blue', 'purple', 'black'],
    edgeBanding,
  } = props;
  const colorNum = colors.length;
  const cloneShape = shape.clone();
  cloneShape.closePath();
  // console.log(cloneShape.curves);
  const colorConfig = getEdgeColorConfig(edgeBanding);
  const newColors: string[] = map(colorConfig, 'color');
  // console.log(newColors);
  return (
    <group>
      {cloneShape.curves.map((curve, i) => {
        const color = newColors[i % colorNum];
        const shape = new Shape();
        shape.add(curve);
        if ((curve as EllipseCurve).isEllipseCurve) {
          const ellipseCurve = curve.clone() as EllipseCurve;
          const { aStartAngle, aEndAngle, aClockwise } = ellipseCurve;
          ellipseCurve.aStartAngle = aEndAngle;
          ellipseCurve.aEndAngle = aStartAngle;
          ellipseCurve.aClockwise = !aClockwise;
          shape.add(ellipseCurve);
        }

        return (
          <group key={shape.uuid}>
            <Extrude
              args={[
                shape,
                {
                  depth: thickness,
                },
              ]}
            >
              <meshStandardMaterial args={[{ color }]} />
            </Extrude>
          </group>
        );
      })}
    </group>
  );
}
